<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/index.css">
        <script language="JavaScript" src="js/index.js"></script>-
	</head>
	<body>
		<div id="div_container">
			<div id="div_fruit_list">
				<p class="center f30">欢迎使用员工后台管理系统</p>
				<div style="border:0px solid red;width:60%;margin-left:20%;text-align:right;">
					<form action="/user.do" method="post" style="float: right"/>
						<input type="hidden" name="oper" value="search"/>
						姓名：<input type="text" name="keyWordsName" th:value="${session.keyWord}"/>
						<input type="submit" value="查询" th:class="btn"/>
					</form>
					<a th:href="@{/add.html}" style="border:0px solid blue;margin-bottom:4px;float: left" >添加员工记录</a>
				</div>
				<table id="tbl_fruit">
					<tr>
						<th class="w20">ID</th>
						<th class="w20">姓名</th>
						<th class="w20">balance</th>
						<th>操作</th>
					</tr>
					<tr th:if="${#lists.isEmpty(session.userList)}">
						<td colspan="4">对不起，列表为空！</td>
					</tr>
					<tr th:unless="${#lists.isEmpty(session.userList)}" th:each="user : ${session.userList}">
						<!-- <td><a th:text="${fruit.fname}" th:href="@{'/edit.do?fid='+${fruit.fid}}">苹果</a></td> -->
						<!--插入超链接时，要将thymeleaf标签放到a标签内部，因为如果在外部，thymeleaf会将结果超链接也会渲染，无法达到超链接的目的-->

						<!--
						<a th:text = "${user.id} "
						意思是通过thymeleaf将user.id渲染成文本作为超链接的点击位置，
						th:href="@{/edit.do(userID = ${user.id})}"></a>
						通过点击超链接，通过用户id从index通过绝对路径跳转到edit.do页面，
						当有多个值时，th:href="@{/edit.do(值1=${对象.属性},值2=${对象.属性})}"></a>
						-->
						<td><a th:text="${user.id}" th:href="@{/user.do(userID=${user.id},operate='edit')}">苹果</a></td>
						<td th:text="${user.name}">5</td>
						<td th:text="${user.balance}">20</td>
						<td><img src="imgs/del.jpg" class="delImg" th:onclick="|delUser(${user.id})|"/></td>
						<!--
						点击图片输出记录，
						th:onclick="|delFruit(${user.id})|"
						th:onclick：thymeleaf渲染鼠标点击事件，
						"|delFruit(${user.id})|"：|delFruit( )|将这部分翻译成字符串，当遇到thymeleaf表达式时，编译表达式
						delFruit():定义的一个js方法
						-->
					</tr>
				</table>
				<!--添加分页-->
				<!--th:disabled="${session.pageCount == 1}" 表示为第一页时，首页不能点击，disable为true-->
				<div style="width:60%;margin-left:20%;padding-top: 2px" class="center" >
					<input type="button" value="首  页" class="btn" th:onclick="|page(${1})|" th:disabled="${session.pageCount == 1}">
					<input type="button" value="上一页" class="btn" th:onclick="|page(${session.pageCount - 1})|" th:disabled="${session.pageCount == 1}">
					<input type="button" value="下一页" class="btn" th:onclick="|page(${session.pageCount + 1})|" th:disabled="${session.pageCount == session.pageCountSub}">
					<input type="button" value="尾  页" class="btn" th:onclick="|page(${session.pageCountSub})|" th:disabled="${session.pageCount == session.pageCountSub}">
				</div>
			</div>
		</div>
	</body>
</html>
